import React,{forwardRef , useImperativeHandle} from 'react';
import { Form, Input } from 'antd';
const FormComponent = ({},ref) => {

  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  useImperativeHandle(ref,() =>({
    form,
  }))
  return (
    <Form
      form={form}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 9,
      }}
      initialValues={{}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="aaa"
        name="aaa"
        rules={[
          {
            required: true,
            message: 'Please input your!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="bbb"
        name="bbb"
        hasFeedback
        rules={[
          {
            required: true,
            message: 'Please input your !',
          },
        ]}
      >
        <Input />
      </Form.Item>

    </Form>
  );
};
export default forwardRef(FormComponent);